import React from 'react'
import { Layout } from 'antd'
import SiderNav from '../../components/SiderNav'
import ContentMain from '../../router/index'
import HeaderBar from '../../components/HeaderBar'

const { Sider, Header, Content, Footer } = Layout


class Index extends React.Component {
  state = {
    collapsed: false
  }

  toggle = () => {
    // console.log(this)  状态提升后，到底是谁调用的它
    this.setState({
      collapsed: !this.state.collapsed
    })
  }
  render() {
    // 设置Sider的minHeight可以使左右自适应对齐
    return (
      <div id='page'>
        <Layout>
          {/* 左侧栏 */}
          <Sider collapsible
            trigger={null}
            collapsed={this.state.collapsed}
          >
            <SiderNav />
          </Sider>
          {/* 右侧栏 */}
          <Layout>
            {/* 头部 */}
            <Header style={{ background: '#fff', padding: '0 16px' }}>
              <HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle} />
            </Header>
              {/* 右下方主体区 */}
            <Content>
              <ContentMain />
            </Content>
            <Footer style={{ textAlign: 'center' }}>React-Admin<a target='_blank' href='https://gitee.com/lyxdemayun/react01'>github地址</a></Footer>
          </Layout>

        </Layout>
      </div>
    );
  }
}
export default Index